前端使用 Bootstrap 布局方法小结

作者 Marlous 日期 2019-05-07
前端
前端使用 Bootstrap 布局方法小结

参考：
1、 Bootstrap4 教程
2、 Bootstrap4 教程布局
3、 基于BootStrap 4.x 中的Flex 实现各种布局

一 两种布局回顾

  1. div + css：
  • 横着布局块元素，将页面或容器横着分成若干个条状块区域。
  • 想把哪个条状块区域分割成几个列区域，就将子元素若干个列块设置成 float，同时其父元素条状块清除浮动。
  • 每个块都可看作是一个新的文档流，然后在其中分成若干个条状块区域，或分割成几个列块区域。
  • 使用递归的思想。
  • margin 是元素之间的距离。记得 padding、border 也会占距离，一开始设计时就要考虑，因为设置的宽度高度是内容的（也可以通过 box-sizing 属性设置，默认值是 content-box），后添加 padding、border 的话，距离会向外扩展。
  • 响应式布局，通过媒体查询设计不同的页面（css）。
  1. flex：
  • 可以将整个网页作为 flex 容器，或直接在网页中添加一个主 flex 容器。所有容器均为 display: flex;。
  • 然后按照设计图，搞清楚整个布局的嵌套关系。
  • 设置父容器的属性：轴方向 flex-direction、换不换行 flex-wrap、子项目的对齐方式 justify-content/align-items。
  • 设置父容器的盒子模型尺寸等（如长、宽）。通过 flex 布局，不需要使用 margin: auto; 来居中布局。
  • 设置项目的属性：order、flex-grow、flex-shrink、flex-basis 等。
  • 设置项目的盒子模型尺寸等（如长、宽）。通过 flex 布局，不需要使用 margin: auto; 来居中布局。
  • 响应式布局，通过媒体查询设计不同的页面（css）。

二 bootstrap 中的 flex 布局

1 布局思路

  • 注意：
    虽然容器可以嵌套，但大多数布局不需要嵌套容器。/ 用 bootstrap 布局相当于综合了上面回顾的两种布局思路。先用弹性盒子布局整体，后在弹性项目中使用浮动布局块级元素，或使用 bootstrap 中的栅格切分列。/ bootstrap 中 box-sizing: border-box。

  • 设置 body 的一些样式（如高度、背景颜色等）。

  • 先将整个页面放入一个弹性容器（bootstrap 中的 container）中，设置横向或纵向排列里面的弹性成员。
  • 此时其中的每个弹性成员看作是一个新的文档流（div + css 布局思路）。
  • 在弹性成员中嵌套容器，利用栅格系统分行，列布局块级元素（推荐。考虑自动的响应式布局，列会在窗口缩小后叠加。用于菜单）。/ 嵌套若干个容器（用于固定要显示的内容块）。/ 在容器中使用浮动布局块级元素（用于固定要显示的内容中的某一项，记得清除浮动）。/ 或几者混合。
  • 元素与元素间通过 margin 来控制彼此间间隔的大小。
  • 通过媒体查询，决定隐藏掉嵌套的若干个容器来适应手机屏幕。

2 布局思路小结

  • 提示：把每个组件看成一个 flex 成员 / 放在栅格中的元素。
  • 用一个 bootstrap 中的 container（用 flex 设置排列）作为整个页面的容器，或者拆分成几个 container（用 flex 设置排列）也行。
  • 把这个 container 当成文档流。
  • 将 container 中每个 flex 成员当成 flex 盒子，然后在这个 flex 成员中使用栅格划分列，在列中放入固定大小的盒子。
  • （以上小结为：container -> flex 盒子 -> 栅格分列 -> 固定大小盒子）
  • 元素与元素间通过 margin 来控制彼此间间隔的大小。
  • 整个 body 高度可以设置为 height: 100vh 充满页面；当手机屏幕大小时（断点）body 的高度不设置（由里面的元素撑开，这样里面的元素不会流到视窗的外面）。
  • 通过媒体查询，决定隐藏掉嵌套的若干个容器来适应手机屏幕。/ 设置新的 CSS 样式。

3 代码实例

  • HTML:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    <!DOCTYPE html>

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
        <link href="css/main.css" rel="stylesheet">
        <title>Marlous' Home</title>
    </head>

    <body class="body-my-style text-center">

        <!--整个网页最外层的容器，flex 布局-->
        <div class="container h-100 mx-auto p-3 d-flex flex-column">

            <!--header 为最外层容器的 flex 成员-->
            <header class="mb-auto">
                <!--flex 成员嵌套一个容器，并通过栅格分成一行（其中两列）-->
                <div class="container">
                    <div class="row">
                        <!--第一列-->
                        <div class="col-md-4">
                            <h1 class="h1-my-style">Home</h1>
                        </div>
                        <!--第二列-->
                        <div class="col-md-8">
                            <nav class="navbar justify-content-center">
                                <a class="nav-a-my-style nav-link" href="https://marlous.github.io/" target="_blank">Blog</a>
                                <a class="nav-a-my-style nav-link" href="#" target="_blank">Works</a>
                                <a class="nav-a-my-style nav-link" href="#" target="_blank">MoKit</a>
                                <a class="nav-a-my-style nav-link" href="#" target="_blank">About</a>
                            </nav>
                        </div>
                    </div>
                </div>
            </header>

            <!--main 为最外层容器的 flex 成员-->
            <main>
                <img class="avator" src="img/profile.JPG">
                <p class="name">Marlous</p>
                <p class="des">" My Conquest is the Sea of Stars. "</p>
                <div class="container">
                    <div class="row">
                        <div class="col-md-3"><a class="social-a-my-style" href="https://github.com/Marlous" target="_blank">💻 GitHub</a></div>
                        <div class="col-md-3"><a class="social-a-my-style" href="https://www.zhihu.com/people/Marlous" target="_blank">☕ 知乎</a></div>
                        <div class="col-md-3"><a class="social-a-my-style" href="https://twitter.com/MarlousMo" target="_blank">🐦 Twitter</a></div>
                        <div class="col-md-3"><a class="social-a-my-style" href=mailto:Goonecat@foxmail.com>📧 E-mail</a></div>
                    </div>
                </div>
            </main>

            <!--footer 为最外层容器的 flex 成员-->
            <footer class="footer-my-style mt-auto">
                <p>Copyright © 2019 Marlous. All rights reserved.</p>
            </footer>

        </div>

        <!-- Scripts -->
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
        
    </body>

    </html>

  • CSS:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    /* 添加在 body 上的样式 */
    /* 调试发现宽度在 768px 时，元素会堆叠在一起，超过视窗高度，元素会 “流下去”，
    所以小于这个宽度时，让 body 高度去掉，让元素撑满高度 */
    @media screen and (min-width: 768px) {
        .body-my-style{
            height:100vh;
            background-color: #333333;
            color: aliceblue;
            text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
            box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
        }
    }

    @media screen and (max-width: 768px) {
        .body-my-style{
            background-color: #333333;
            color: aliceblue;
            text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
            box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
        }
    }


    /* 在不改变 bootstrap 中 container 固有宽度情况下，通过添加 margin 来使 flex 成员中的元素更紧凑 */
    header,
    main,
    footer{
        margin-left: 10%;
        margin-right: 10%;
    }


    /* 设置 header（flex 成员）中的标题、导航栏元素样式 */
    .h1-my-style{
        display: inline-block;
        border-bottom: solid #393e46;
        font-weight: bold;
    }

    .nav-a-my-style{
        color: #ffffff;
        font-weight: bold;
        border-bottom: solid transparent;
    }

    .nav-a-my-style:hover{
        color: dimgrey;
        font-weight: bold;
        border-bottom: solid #ffffff;
        transition: 200ms;
    }


    /* 设置 mian（flex 成员）中的头像、两行文字、若干社交列元素样式 */
    .avator{
        display: inline-block;
        margin: 10px auto 10px auto;
        height: 130px;
        width: 130px;
        border: 4px solid #ffffff;
        border-radius: 50%;
    }

    .name{
        color: #ffffff;
        font-size: larger;
        font-weight: bold;
    }

    .des{
        margin-top: 20px;
        margin-bottom: 50px;
    }

    .social-a-my-style{
        display: inline-block;
        margin: 2px;
        padding: 5px;
        color: #ffffff;
        border-left: solid 2px transparent;
        border-right: solid 2px transparent;
    }

    .social-a-my-style:hover{
        display: inline-block;
        margin: 2px;
        padding: 5px;
        text-decoration: none;
        color: #ffffff;
        border-left: solid 2px #ffffff;
        border-right: solid 2px #ffffff;
        transition: 200ms;
    }


    /* 设置 footer（flex 成员）中一行文字元素样式 */
    .footer-my-style p{
        margin-top: 8px;
        margin-bottom: 8px;
        color: darkgray;
        font-size: small;
    }
FEATURED TAGS
前端